<template>
  <div>
    <van-cell-group>
      <van-field v-model="username" label="用户名" placeholder="请输入用户名"/>
      <van-field v-model="phone" label="手机号" placeholder="请输入手机号"/>
      <van-field v-model="area" label="地区" placeholder="选择省/市/区" @focus="Suk_showarea"/>
      <van-field v-model="detail" label="详细地址" placeholder="所在小区，街道等信息"/>
    </van-cell-group>
    <van-popup v-model="show" position="bottom">
      <van-area :area-list="areaList" @confirm="Suk_checkarea" @cancel="Suk_cancel"/>
    </van-popup>
    <div class="savebtn" @click="onSave">保存</div>
    <div class="savebtn" @click="Suk_delet" style="background:#f44">删除</div>
  </div>
</template>

<script>
import areaList from "@/assets/area.js";
export default {
  data() {
    return {
      username: null,
      phone: null,
      area: null,
      detail: null,
      id: null,
      show: false,
      areaList
    };
  },
  created() {
    this.Suk_getarea();
  },

  methods: {
    // 下面的是我们的删除按钮
    Suk_delet() {
      let that = this;
      if (that.id == null) {
        return false;
      } else {
        that.$dialog
          .confirm({
            title: "删除",
            message: "确定删除该条地址？"
          })
          .then(() => {
            // on confirm
            that.$toast.loading({
              message: "加载中..."
            });
            let Sukdata = {
              id: that.id
            };
            console.log(Sukdata);
            that.axios
              .post(
                that.baseUrl + "/address/deletAddress",
                that.Qs.stringify(Sukdata),
                {
                  headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                  }
                }
              )
              .then(function(res) {
                if (res.request.status === 200) {
                  if (res.data.meta.code == 200) {
                    console.log(res.data);
                    if(res.data.meta.msg == "删除成功"){
                      that.$toast({
                        message:'删除成功！'
                      })
                      that.$router.go(-1)
                    }
                    that.$toast.clear();
                  } else if (res.data.meta.code == 501) {
                  }
                }
              });
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 拿到修改的地址
    Suk_getarea() {
      let that = this;
      let userad = that.$route.params.useraddress;
      console.log(that.$route.params, "add");
      that.id = that.$route.params.id;
      let add = that.$route.params;
      if (that.$route.params) {
        (that.id = add.id),
          (that.username = add.name),
          (that.phone = add.phone),
          (that.area = add.area),
          (that.detail = add.detail);
      }
    },
    Suk_cancel() {
      let that = this;
      that.show = false;
    },
    Suk_checkarea(e) {
      let that = this;
      that.area = e[0].name + " " + e[1].name + " " + e[2].name;
      that.show = false;
    },
    // 下面的是展示我们的区域选择
    Suk_showarea() {
      let that = this;
      that.show = true;
    },
    getset(e) {
      let that = this;
      if (e === true) {
        that.default = true;
      } else if (e === false) {
        that.default = false;
      }
    },
    set(adid) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId: localStorage.getItem("userid"),
        id: adid
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/address/setMoren", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    onSave(e) {
      let that = this;
      if (that.id == null) {
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          userId: localStorage.getItem("userid"),
          name: that.username,
          address: that.area,
          detail: that.detail,
          phone: that.phone
        };
        console.log(Sukdata);
        that.axios
          .post(
            that.baseUrl + "/address/addAddress",
            that.Qs.stringify(Sukdata),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data);
                that.$router.go(-1);
                that.$toast({
                  message: "设置成功"
                });
                that.arr = res.data.data;
                if (that.default === true) {
                  that.set(res.data.data.id);
                }
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      } else {
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          id: that.id,
          userId: localStorage.getItem("userid"),
          name: that.username,
          address: that.area,
          detail: that.detail,
          phone: that.phone
        };
        console.log(Sukdata);
        that.axios
          .post(
            that.baseUrl + "/address/upAddress",
            that.Qs.stringify(Sukdata),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data);
                that.$router.go(-1);
                that.$toast({
                  message: "修改成功"
                });
                that.arr = res.data.data;
                if (that.default === true) {
                  that.set(res.data.data.id);
                }
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      }
    },

    onDelete() {
      this.$toast("delete");
    }
  }
};
</script>

<style scoped>
.savebtn {
  width: 90%;
  text-align: center;
  color: #fff;
  background: #ff9910;
  font-size: 0.5rem;
  height: 1.2rem;
  line-height: 1.2rem;
  margin: 1rem auto;
  border-radius: 0.2rem;
}
</style>
